<template>
	<fui-bottom-popup v-bind="$attrs" :show="modelValue" @close="closePopup">
		<view class="fui-custom__wrap p-30">
			<view class="flex-between mb-25">
				<view class="text-32">选择年级</view>
				<uni-icons type="closeempty" color="rgba(144,147,153,.8)" @tap="closePopup" />
			</view>
			
			<scroll-view scroll-y style="height: 500rpx">
				<view class="py-20 ml-20 border-bottom flex-between" v-for="item, index in list" :key="index" @tap="itemChange(item)">
					<text :class="['text-30 tip', { 'text-primary': item.checked }]">{{ item.name }}</text>
					<uv-image :src="`${imgPath}svgs/select.svg`" width="24rpx" height="18rpx" v-if="item.checked" />
				</view>
			</scroll-view>
			
			<fui-button text="确定" :margin="['60rpx', '0', '0']" @click="confirm" />
		</view>
	</fui-bottom-popup>
</template>

<script setup>
	
	import { ref, watch } from 'vue'
	import { imgPath } from '@/common/config'
	import { gradeAll } from '@/common/apis/other'
	
	let props = defineProps({
		modelValue: {
			type: Boolean, 
			default: false
		}
	})
	
	let { user } = uni.$store()
	
	let emits = defineEmits(['update:modelValue'])
	let closePopup = () => emits('update:modelValue', false)
	
	let list = ref([])
	let getGrade = async () => list.value = await gradeAll()
	
	watch(() => props.modelValue, async show => show && await getGrade())
	
	let listItem = ref({})
	function itemChange(item) {
		list.value.map(it => it.checked = false)
		item.checked = !item.checked
		listItem.value = item
	}
	
	function confirm() {
		user.userInfo.grade = listItem.value
		closePopup()
	}
	
</script>

<style scoped lang="scss">
	.tip{color: #333}
	.text-primary{color: $primary !important}
</style>